/* Scrollbar
 -------------------- */
@mixin scroll-bar {
  &::-webkit-scrollbar {
    z-index: 11;
    width: var(--scrollbar-width);

    &:horizontal {
      height: var(--scrollbar-width);
    }

    &-thumb {
      width: var(--scrollbar-width);
      background: var(--scrollbar-thumb-background);
      border-radius: var(--scrollbar-width);
    }

    &-corner {
      background: transparent;
    }

    &-track {
      background: var(--scrollbar-track-background);
      border-radius: var(--scrollbar-width);

      &-piece {
        width: var(--scrollbar-width);
        background: var(--scrollbar-track-background);
        border-radius: var(--scrollbar-width);
      }
    }
  }
}

/* Placeholder
 -------------------- */
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}

/* 设置每个状态下圆点的背景色
 -------------------- */
@mixin setStatusBg($status-list) {
  @each $status in $status-list {
    &.#{$status} {
      .circle {
        background: var(--background-#{$status});
      }
    }
  }
}

/* 设置仪器类型 患者来源标签
 -------------------- */
@mixin setTagColor($tag-list) {
  @each $tag in $tag-list {
    &.#{$tag}-tag {
      color: var(--color-#{$tag});
    }
  }
}

/** 设置 text-button 的颜色 */
@mixin setTextButtonColor($text-button-list) {
  @each $text-button in $text-button-list {
    &.#{$text-button}-text-button {
      color: var(--color-#{$text-button});
    }
  }
}

@mixin clearfix {
  &::after {
    display: table;
    clear: both;
    content: '';
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin pct($pct) {
  position: relative;
  width: #{$pct};
  margin: 0 auto;
}

@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;

  width: 0;
  height: 0;

  @if $direction==up {
    border-right: $transparent-border-style;
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
  } @else if $direction==right {
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
    border-left: $color-border-style;
  } @else if $direction==down {
    border-top: $color-border-style;
    border-right: $transparent-border-style;
    border-left: $transparent-border-style;
  } @else if $direction==left {
    border-top: $transparent-border-style;
    border-right: $color-border-style;
    border-bottom: $transparent-border-style;
  }
}

/* 设置box
 -------------------- */
@mixin setBox($backgroundColor, $radius: 6px) {
  background: $backgroundColor;
  border-radius: $radius;
}
